<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>表单</title>
    <style type="text/css">
        .bg {
            height: 650px;
            width: 450px;
            border: 1px solid #000;
            margin: auto;
        }

        form {
            padding-left: 50px;
        }

        h2 {
            text-align: center;
        }

        #cz {
            margin-left: 90px;
        }

        #tj {
            margin-left: 80px;
        }
    </style>

</head>

<body>
    <div class="bg">
        <h2>表单</h2>
        <form action="http://www.baidu.com" method="post">
            <p><span>用&nbsp;户&nbsp;名&nbsp;&nbsp;：&nbsp;</span><input type="text" name="username" id="username"
                    placeholder="请输入姓名" /></p>
            <p><span>密码设置：&nbsp;</span><input id="password" type="password" placeholder="请输入密码" /></p>
            <p><span>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别&nbsp;：&nbsp;</span><input type="radio" name="sex"
                    checked="checked" />男
                <input type="radio" name="sex" />女
            </p>
            <p><span>生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日&nbsp;：&nbsp;</span><input type="date" name="birthday" /></p>
            <p><span>电话号码：&nbsp;</span><input type="tel" pattern="^\d{11}$" /></p>
            <p><span>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱&nbsp;：&nbsp;</span><input type="email" name="email"
                    pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" /></p>
            <p><span>兴趣爱好：</span><input type="checkbox" />运动
                <input type="checkbox" />买买买
                <input type="checkbox" />玩游戏
            </p>
            <p><span>学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历：</span>
                <select>
                    <option>-请选择-</option>
                    <option>高中</option>
                    <option>本科</option>
                    <option>专科</option>
                </select>
            </p>
            <p><span>自我介绍：</span><br /><textarea cols="50" rows="8" placeholder="不超过200字"></textarea></p>
            <p class="bun"><input id="tj" type="submit" value="提交" />
                <input id="cz" type="reset" value="重置" />
            </p>
        </form>
    </div>
</body>

</html>